<template>
	<view class="content-login" :style="{ height: scrollH + 'px' }">
		<view class="tabbar">
			<uni-icons class="left-icon" color="#000" type="back" @click="back()"></uni-icons>
			<view class="title" style="color: #000;">{{ title }}</view>
		</view>
		
		<view class="add-view-top">
			<view class="line san" :class="{ 'active': registerStau === 1 }">
				1. 手机号验证
			</view>
			<view class="line" :class="{ 'active': registerStau === 2 }">
				2. 设置新密码
			</view>
		</view>

		<view v-if="registerStau === 1" class="login-view">
			<view class="login-view-list">
				<view class="add-view-item">
					<view class="add-view-item-name">手机号：</view>
					<view class="add-view-item-value">
						<input type="number" class="hasvalueinput" placeholder-class="nohasvalueinput" placeholder="请输入手机号"
							v-model="addlist.phone" :disabled="isEdit" />
					</view>
				</view>
				<view class="add-view-item">
					<view class="add-view-item-name">验证码:</view>
					<view class="add-view-item-value code-box">
						<input type="number" class="hasvalueinput" placeholder-class="nohasvalueinput" placeholder="请输入验证码"
							v-model="addlist.smsCode" :disabled="isEdit" />
					</view>
					
					<view class="code-btn" @click="getTextCode">
						{{ captchaText }}
					</view>
				</view>
				<!-- <template v-for="item,i in questionList">
					<view class="add-view-item">
						<uni-icons type="info" :color="'#8f8f94'" size="20" class="icon" />
						<view class="add-view-item-value">
							<input type="text" class="hasvalueinput" placeholder-class="nohasvalueinput" placeholder="密保问题" v-model="item.question" disabled />
						</view>
					</view>
					<view class="add-view-item">
						<uni-icons type="chatboxes" :color="'#8f8f94'" size="20" class="icon" />
						<view class="add-view-item-value">
							<input type="text" class="hasvalueinput" placeholder-class="nohasvalueinput" placeholder="请输入密保答案" v-model="item.answers" />
						</view>
					</view>
				</template> -->
			</view>
			<view class="click-but-view"><button @click="tologin(2)" class="loginbuttonstyle" :disabled="loginstau" :loading="loginstau">下一步</button></view>
		</view>

		<view v-if="registerStau === 2" class="login-view">
			<view class="login-view-list">
				<view class="add-view-item" v-show="isEdit">
					<view class="add-view-item-name">旧密码：</view>
					<view class="add-view-item-value">
						<input class="hasvalueinput" placeholder-class="nohasvalueinput" placeholder="请输入旧密码" v-model="formData.oldPassword" :password="showPasswordOld" />
						<uni-icons type="eye-filled" :color="showPasswordOld ? '#8f8f94' : '#32bc92'" size="25" @click="changePasswordOld" class="eyeicon" />
					</view>
				</view>
				<view class="add-view-item">
					<view class="add-view-item-name">新密码：</view>
					<view class="add-view-item-value">
						<input class="hasvalueinput" placeholder-class="nohasvalueinput" placeholder="请输入新密码" v-model="formData.password" :password="showPassword" />
						<uni-icons type="eye-filled" :color="showPassword ? '#8f8f94' : '#32bc92'" size="25" @click="changePassword" class="eyeicon" />
					</view>
				</view>
				<view class="add-view-item uni-form-item uni-column">
					<view class="add-view-item-name">再次输入：</view>
					<view class="add-view-item-value">
						<input class="hasvalueinput" placeholder-class="nohasvalueinput" placeholder="请再次输入密码" v-model="formData.newPasswords" :password="showPasswords" />
						<uni-icons type="eye-filled" :color="showPasswords ? '#8f8f94' : '#32bc92'" size="25" @click="changePasswords" class="eyeicon" />
					</view>
				</view>
			</view>
			<view class="click-but-view"><button @click="Submit()" class="loginbuttonstyle" :disabled="loginstau" :loading="loginstau">修改密码</button></view>
			
			<!--< view class="click-but-view" style="margin-bottom: 40rpx;">
				<button @click="toone()" class="loginbuttonstyle" :disabled="loginstau" :loading="loginstau">上一步</button>
			</view> -->
		</view>
		<view class="bottom-ios-line"></view>
	</view>
</template>

<script>
import loginApi from '@/api/socialized-servce/login/index.js'
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			title: '找回密码',
			isEdit: false,
			captchaText: '获取验证码',
			// 点击登录的加载状态
			loginstau: false,
			// 展示密码
			showPasswordOld: true,
			showPassword: true,
			showPasswords: true,
			loginname: '',
			password: '',
			checked: true,
			registerStau: 1,
			questionList: [],
			addlist: {
				phone: '',
				smsCode: '',
			},
			formData: {},
		};
	},
	computed: {
		scrollH: function() {
			let winHeight = 0;
			uni.getSystemInfo({
				success: function(res) {
					winHeight = res.windowHeight;
				}
			});
			winHeight = parseInt(winHeight);
			return winHeight;
		}
	},
	onLoad(e) {
		if (e.edit) {
			this.title = '修改密码'
			this.addlist.username = e.username
			this.isEdit = true
			this.getQuestion()
		}
	},
	onShow() {
		if (this.isEdit === true) {
			this.registerStau = 2;
		}
	},
	methods: {
		//发送验证码
		getTextCode() {
			var that = this;
			if (that.disabled) return
			var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
			var dataMobile = this.addlist.phone;
			if (dataMobile == '') {
				uni.showToast({
					title: '请输入您的联系方式',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			if (!myreg.test(dataMobile)) {
				uni.showToast({
					title: '联系方式格式不正确',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			loginApi.queryVerificationCode({
				phone: dataMobile,
				signName: '美农'
			}).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '发送成功',
						duration: 2000,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			})
			// 倒计时时间 60秒
			that.time = 60;
			that.fn = setInterval(function() {
				that.time--
				that.captchaText = that.time + 's';
				that.disabled = true;
				if (that.time == 0) {
					that.fn && clearInterval(that.fn)
					that.disabled = false;
					that.captchaText = '获取验证码';
				}
			}, 1000);
		},
		getQuestion() {
			this.addlist.username && loginApi.findQuestionListByUserName({
				userName: this.addlist.username
			}).then(res => {
				this.questionList = res.data || []
				// this.question = res.data && res.data[0]?.question
				// this.questionId = res.data && res.data[0]?.questionId
				if (!res.data || res.data?.length === 0) {
					uni.showToast({
						title: '该用户没有密保问题',
						icon: 'none'
					});
				}
			})
		},
		//密码显示隐藏方法
		changePasswordOld() {
			this.showPasswordOld = !this.showPasswordOld;
		},
		changePassword() {
			this.showPassword = !this.showPassword;
		},
		changePasswords() {
			this.showPasswords = !this.showPasswords;
		},
		// 获取是否保存密码状态
		checkstaus() {
			this.checked = !this.checked;
			uni.setStorageSync('checked', this.checked);
		},
		toone() {
			this.registerStau = 1;
		},
		Submit() {
			let params = {
				...this.formData
			};
			if (this.isEdit === true) {
				if (this.formData.oldPassword === undefined || !this.formData.oldPassword) {
					uni.showToast({
						title: '请填写旧密码',
						icon: 'none'
					});
					return;
				}
			}
			// TODO:
			let reg = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*.]{8,20}$/;
			if (!reg.test(this.formData.password)) {
			// if (this.formData.password === undefined || !this.formData.password) {
				uni.showToast({
					title: '请填写8到20位的数字和字母组合的新密码',
					icon: 'none'
				});
				return;
			}
			if (this.formData.password !== this.formData.newPasswords) {
				uni.showToast({
					title: '两次密码不一致！！！',
					icon: 'none'
				});
				return
			}
			
			if (this.isEdit === true) {
				loginApi.updatePassword({
					oldPassword: this.formData.oldPassword,
					newPassword: this.formData.password,
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					if (res.code == 200) {
						setTimeout(() => {
							const url = '/pages/login/login'
							this.$togo(url)
						}, 1000);
					}
				})
			} else {
				loginApi.forgotPassword({
					phone: this.addlist.phone,
					identifyingCode: this.addlist.smsCode,
					password: this.formData.password,
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					if (res.code == 200) {
						setTimeout(() => {
							const url = '/pages/login/login'
							this.$togo(url)
						}, 1000);
					}
				})
			}
		},
		// 判断注册信息
		async tologin(e) {
			if (e === 2) {
				if (this.addlist.phone === '' || this.addlist.phone.length != 11) {
					uni.showToast({
						title: '请填写正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (this.addlist.smsCode === '') {
					uni.showToast({
						title: '请填写密验证码',
						icon: 'none'
					});
					return;
				}
				loginApi.checkCode({
					phone: this.addlist.phone,
					identifyingCode: this.addlist.smsCode
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					if (res.code == 200) {
						this.registerStau = 2;
					}
				})
			}
		},
		isPoneAvailable(poneInput) {
			var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
			if (!myreg.test(poneInput)) {
				return false;
			} else {
				return true;
			}
		},

		//标题栏返回上一层
		back() {
			uni.navigateBack({
				delta: 1
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.content-login {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #fbfefd;
	
	.add-view-top {
		font-size: 32rpx;
		margin-bottom: 20rpx;
		display: flex;
		width: 100%;
		color: #fff;
		
		.line {
			width: 50%;
			text-align: center;
			padding: 20rpx 0;
			background-color: #ccc;
			position: relative;
			
			&.san {
				&::before {
					display: inline-block;
					content: '';
					width: 0;
					height: 0;
					border-top: 40rpx solid transparent;
					border-right: 40rpx solid transparent;
					border-left: 40rpx solid #ccc;
					border-bottom: 40rpx solid transparent;
					position: absolute;
					right: -78rpx;
					top: 0;
					z-index: 2;
				}
				&.active::before {
					border-left: 40rpx solid #007AFF;
				}
			}
			
			&.active {
				background-color: #007AFF;
			}
		}
	}
	
	.tabbar {
		width: 750rpx;
		// height: 454rpx;
		color: #393939;
		display: flex;
		justify-content: center;
		z-index: 10;
		padding-bottom: 26rpx;
		border-bottom: 1px solid #e9eaee;
	
		.title {
			// width: 750rpx;
			margin-top: 90rpx;
			height: 32rpx;
			line-height: 32rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	
		.left-icon {
			position: fixed;
			top: 90rpx;
			left: 30rpx;
		}
	}
	.login-view-list {
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
		margin: 30rpx 50rpx;
		width: calc(100% - 100rpx);
	}
	.login-view {
		width: 100%;
		height: 74%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 0 15%;
		justify-content: flex-start;
		box-sizing: border-box;
		overflow-y: auto;
		.login-view-list {
			display: flex;
			flex-direction: column;
			align-items: center;
			.add-view-items {
				width: calc(100% - 10rpx);
				height: 60rpx;
				margin-top: 23rpx;
				padding: 50rpx 25rpx;
				color: #424242;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				background-color: rgba(255, 255, 255, 0);
				// box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				font-size: 28rpx;
				.add-view-item-img {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
				.add-view-item-name {
					width: 190rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					white-space: nowrap;
					text-align: right;
				}

				.org-btu1 {
					width: 120rpx;
					height: 60rpx;
					margin: 10rpx 2%;
					color: #ffffff;
					font-size: 30rpx;
					font-weight: 500;
					letter-spacing: 2rpx;
					line-height: 60rpx;
					border-radius: 60rpx;
					background-color: rgba(33, 222, 157, 1);
					box-shadow: 0px 0px 7px rgba(33, 222, 157, 1);
				}
				.add-view-item-value {
					width: 460rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					position: relative;
					.eyeicon {
						position: absolute;
						z-index: 99;
						right: 5px;
						top: 0;
					}
					.hasvalueinput {
						height: 60rpx;
						font-size: 28rpx;
						line-height: 60rpx;
						color: #000000;
						position: relative;
					}
					.nohasvalueinput {
						height: 60rpx;
						line-height: 60rpx;
						font-size: 28rpx;
						color: #959595;
						.eyeicon {
							position: absolute;
							z-index: 99;
							right: 5px;
						}
					}
				}
			}
		}
		.click-but-view {
			width: 600rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;
			.loginbuttonstyle {
				width: 500rpx;
				height: 60rpx;
				margin: 80rpx 15%;
				color: #ffffff;
				font-size: 35rpx;
				font-weight: 500;
				letter-spacing: 20rpx;
				line-height: 60rpx;
				border-radius: 60rpx;
				// background-color: rgba(50, 204, 151, 1);
				// box-shadow: 0px 0px 7px rgba(33, 222, 157, 1);
				background-image: linear-gradient(to right, #2765fe, #83aafe);
			}
		}
		.click-but-views {
			width: 600rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;
			.loginbuttonstyle {
				width: 600rpx;
				height: 80rpx;
				margin: 80rpx 15%;
				color: rgba(50, 204, 151, 1);
				font-size: 35rpx;
				font-weight: 500;
				letter-spacing: 20rpx;
				line-height: 80rpx;
				border-radius: 80rpx;
				background-color: #ffffff;
				box-shadow: 0px 0px 7px rgba(33, 222, 157, 1);
			}
		}
	}
	.add-view-list {
		width: calc(100% - 120rpx);
		position: relative;
		.add-view-item {
			width: 100%;
			height: 60rpx;
			margin-top: 16rpx;
			padding: 50rpx 25rpx;
			color: #959595;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			font-size: 28rpx;
			.add-view-item-img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
			.add-view-item-name {
				width: 190rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				white-space: nowrap;
				text-align: right;
			}

			.org-btu1 {
				width: 120rpx;
				height: 60rpx;
				margin: 10rpx 2%;
				color: #ffffff;
				font-size: 30rpx;
				font-weight: 500;
				letter-spacing: 2rpx;
				line-height: 60rpx;
				border-radius: 60rpx;
				background-color: rgba(33, 222, 157, 1);
				box-shadow: 0px 0px 7px rgba(33, 222, 157, 1);
			}
			.add-view-item-value {
				width: 460rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				position: relative;
				.eyeicon {
					position: absolute;
					z-index: 99;
					right: 5px;
					top: 0;
				}
				.hasvalueinput {
					height: 60rpx;
					font-size: 28rpx;
					line-height: 60rpx;
					color: #000000;
					position: relative;
				}
				.nohasvalueinput {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #959595;
					.eyeicon {
						position: absolute;
						z-index: 99;
						right: 5px;
					}
				}
			}
		}
	}
	.add-view-item {
		width: calc(100% - 10rpx);
		height: 60rpx;
		// margin-top: 16rpx;
		padding: 50rpx 25rpx;
		color: #959595;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		font-size: 28rpx;
		border-bottom: 1px solid #f3f3f3;
		.add-view-item-img {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
		.add-view-item-name {
			width: 190rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			white-space: nowrap;
			// text-align: right;
		}

		.org-btu1 {
			width: 120rpx;
			height: 60rpx;
			margin: 10rpx 2%;
			color: #ffffff;
			font-size: 30rpx;
			font-weight: 500;
			letter-spacing: 2rpx;
			line-height: 60rpx;
			border-radius: 60rpx;
			background-color: rgba(33, 222, 157, 1);
			box-shadow: 0px 0px 7px rgba(33, 222, 157, 1);
		}
		.add-view-item-value {
			width: 550rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			position: relative;
			.eyeicon {
				position: absolute;
				z-index: 99;
				right: 5px;
				top: 0;
			}
			.hasvalueinput {
				height: 60rpx;
				font-size: 28rpx;
				line-height: 60rpx;
				color: #000000;
				position: relative;
			}
			.nohasvalueinput {
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #959595;
				.eyeicon {
					position: absolute;
					z-index: 99;
					right: 5px;
				}
			}
		}
		.line-color-black {
			color: #000000;
		}
		.code-box {
			width: calc(100% - 260rpx);
		}
		.code-btn {
			font-size: 26rpx;
			padding: 6rpx 12rpx;
			background: #e6dce0;
			color: #0288ed;
			border-radius: 10rpx;
			margin-left: 12rpx;
			width: 160rpx;
			text-align: center;
		}
	}

	.checkone {
		margin-left: 15%;
		margin-top: 18rpx;
		width: 60%;
		display: flex;
		flex-direction: row-reverse;
	}
	.bottom-view {
		position: absolute;
		bottom: 10rpx;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.bottom-view-line {
			height: 60rpx;
			line-height: 60rpx;
			color: #84878c;
			text-decoration: underline;
		}
	}
}

    .uni-eye-active {
        color: #007AFF;
    }
</style>
